<template>
	<view class="u-rela">
		<div class="u-font-48 blod u-p-b-20">发布职位</div>
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="职位名称">
				<u-input v-model="form.name" placeholder="请输入职位名称" />
			</u-form-item>
			<u-form-item label="职位描述">
				<u-input class="textarea" v-model="form.intro" type="textarea" />
			</u-form-item>
			<u-form-item label="职位类型">
				<u-input placeholder="请选择" v-model="form.jobType" type="select" @click="jobTypeShow = true" />
				<u-action-sheet :list="jobTypeList" v-model="jobTypeShow" @click="jobTypeCallback" border-radius='30' :cancel-btn='false'></u-action-sheet>
			</u-form-item>
			<u-form-item label="经验要求">
				<u-input placeholder="请选择" v-model="form.experience" type="select" @click="experienceShow = true" />
				<u-action-sheet :list="experienceList" v-model="experienceShow" @click="experienceCallback" border-radius='30' :cancel-btn='false'></u-action-sheet>
			</u-form-item>
			<u-form-item label="学历">
				<u-input placeholder="请选择" v-model="form.education" type="select" @click="eduShow = true" />
				<u-action-sheet :list="eduList" v-model="eduShow" @click="eduCallback" border-radius='30' :cancel-btn='false'></u-action-sheet>
			</u-form-item>
			<u-form-item label="薪资范围">
				<u-input placeholder="请选择" v-model="form.salary" type="select" @click="salaryShow = true" />
				<u-action-sheet :list="salaryList" v-model="salaryShow" @click="salaryCallback" border-radius='30' :cancel-btn='false'></u-action-sheet>
			</u-form-item>
			<u-form-item label="职位关键字">
				<div class="u-input u-flex u-flex-wrap">
					<u-tag :text="item" type="info" closeable v-for="(item,index) in tag_list"
						:key="index" @close="tagClick(index)"/>
					<div class="icon-plus-wrap u-m-l-10" @click="handler_input_flag">
						<u-icon name="plus"></u-icon>
					</div>
				</div>
				<view class="u-m-t-20" v-if="input_flag == true">
					<u-input placeholder="请添加职位关键字" v-model="form.tag" @blur='handler_blur' />
				</view>
			</u-form-item>
			<u-form-item label="省">
				<view class="u-m-t-20">
					<u-input v-model="form.province" />
				</view>
			</u-form-item>
			<u-form-item label="市">
				<view class="u-m-t-20">
					<u-input v-model="form.city" />
				</view>
			</u-form-item>
			<u-form-item label="区">
				<view class="u-m-t-20">
					<u-input v-model="form.county" />
				</view>
			</u-form-item>
			<u-form-item label="区域">
				<u-input placeholder="请选择" v-model="form.area" type="select" @click="areaShow = true" />
				<u-action-sheet :list="areaList" v-model="areaShow" @click="areaCallback" border-radius='30' :cancel-btn='false'></u-action-sheet>
				<!-- <view class="u-m-t-20">
					<u-input v-model="form.area" />
				</view> -->
			</u-form-item>
			<u-form-item label="公司地址">
				<!-- <u-input placeholder="请选择" v-model="form.address" type="select" @click="addressShow = true" />
				<u-action-sheet :list="addressList" v-model="addressShow" @click="addressCallback" border-radius='30' :cancel-btn='false'></u-action-sheet> -->
				<view class="u-m-t-20">
					<u-input v-model="form.address" />
				</view>
			</u-form-item>
			<u-form-item label="联系电话">
				<u-input placeholder="请输入联系方式" v-model="form.mobile" />
			</u-form-item>
		</u-form>
		<button class="u-reset-button btn u-m-t-60" @click="submit" v-if="categoryId">发布</button>
		<button class="u-reset-button btn u-m-t-60" @click="completeSuccess" v-if="jsonItem.job_id">编辑完成</button>
		<!-- <navigator url="/pages/recruit/index">
			
		</navigator> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				form: {
					name:'',
					intro:'',
					address: '',
					salary:'',
					education:'',
					experience:'',
					jobType:'',
					tag:'',
					province: '',
					city: '',
					county: '',
					area: '',
					mobile: '',
					longitude:'',//经度
					latitude:'',//纬度
				},
				areaShow:false,
				areaList:[
					
				],
				eduShow: false,
				eduList: [
					// {
					// 	text: '本科'
					// },
					// {
					// 	text: '研究生'
					// },
					// {
					// 	text: '大专'
					// }
				],
				addressShow: false,
				addressList: [{
						text: '某某是某某区某某号'
					},
					{
						text: '某某是某某区某某号11'
					},
					{
						text: '某某是某某区某某号22'
					}
				],
				salaryShow: false,
				salaryList: [
					// {
					// 	text: '5K-6K/月'
					// },
					// {
					// 	text: '5K-6K/月11'
					// },
					// {
					// 	text: '5K-6K/月22'
					// }
				],
				jobTypeShow: false,
				jobTypeList: [
					// {
					// 	text: '农业'
					// },
					// {
					// 	text: '农业'
					// },
					// {
					// 	text: '农业'
					// }
				],
				experienceShow: false,
				experienceList: [{
						text: '1-3年'
					},
					{
						text: '3-5年'
					},
					{
						text: '5-10年'
					}
				],
				
				categoryId:'',
				tag_list: [
					// '五险', '年底双薪'
				],
				input_flag: false,
				
				jsonItem:{}
			}
		},
		onLoad(options) {
			console.log(options);
			if(options.company_id){
				this.categoryId = options.company_id
			}
			
			if(options.jsonItem){
				this.jsonItem = JSON.parse(options.jsonItem)
				this.form.name = this.jsonItem.title;
				this.form.intro = this.jsonItem.content;
				// this.categoryId = this.jsonItem.category_id;
				this.form.experience = this.jsonItem.experience;
				this.form.salary = this.jsonItem.salary;
				// this.form.education = this.jsonItem.education;
				this.tag_list = this.jsonItem.tag;
				this.form.province = this.jsonItem.province;
				this.form.city = this.jsonItem.city;
				this.form.county = this.jsonItem.county;
				this.form.area = this.jsonItem.area;
				this.form.address = this.jsonItem.address;
				this.form.longitude = this.jsonItem.longitude;
				this.form.latitude = this.jsonItem.latitude
			}
			
			
			// 行业列表
			this.get_recruit_industry();
			
			// 薪资范围
			this.get_recruit_jobSalary();
			
			// 学历列表
			this.get_recruit_education();
			
			// 工作区域
			this.get_recruit_jobArea();
			
			// 获取经纬度
			this.get_latAndLong()
		},
		methods: {
			// 点击actionSheet回调
			addressCallback(index) {
				this.form.address = this.addressList[index].text;
			},
			// 点击actionSheet回调
			salaryCallback(index) {
				this.form.salary = this.salaryList[index].text;
			},
			// 点击actionSheet回调
			jobTypeCallback(index) {
				this.form.jobType = this.jobTypeList[index].text;
			},
			// 点击actionSheet回调
			experienceCallback(index) {
				this.form.experience = this.experienceList[index].text;
			},
			// 点击actionSheet回调
			eduCallback(index) {
				this.form.education = this.eduList[index].text;
			},
			// 点击actionSheet回调
			areaCallback(index) {
				this.form.area = this.areaList[index].text;
			},
			
			// 删除tag
			tagClick(index) {
				this.tag_list.splice(index, 1)
			},
			
			// 点击添加职位关键字事件
			handler_input_flag() {
				this.input_flag = true;
			},
			
			// 添加职位关键字输入框失去焦点事件
			handler_blur() {
				console.log('失去焦点了');
			
				if (this.form.tag != '') {
					this.input_flag = false
					this.tag_list.push(this.form.tag);
					this.form.tag = ''
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入公司福利',
						duration: 2000
					})
				}
			},
			
			// 行业列表
			get_recruit_industry() {
				this.$http({
					url: this.api.recruit_industry,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(el => {
							this.jobTypeList.push({
								id: el.id,
								text: el.title
							})
						})
					}
				})
			},
			
			// 薪资范围
			get_recruit_jobSalary(){
				this.$http({
					url:this.api.recruit_jobSalary,
					method:'GET'
				}).then(res=>{
					if(res.code == 1){
						this.salaryList = res.data.map(e=>{
							return {
								text:e
							}
						})
					}
				})
			},
			
			// 学历列表
			get_recruit_education(){
				this.$http({
					url:this.api.recruit_education,
					method:'GET'
				}).then(res=>{
					if(res.code == 1){
						this.eduList = res.data.map(e=>{
							return {
								text:e
							}
						})
					}
				})
			},
			
			// 工作区域
			get_recruit_jobArea() {
				this.$http({
					url: this.api.recruit_jobArea,
					method: 'GET'
				}).then(res => {
					this.areaList = res.data.map(e => {
						return {
							text: e
						}
					})
				})
			},
			
			// 发布岗位
			get_recruit_addJob(){
				this.$http({
					url:this.api.recruit_addJob,
					method:'POST',
					data:{
						title:this.form.name,//岗位名称
						content: this.form.intro,//岗位详情
						category_id: this.categoryId,//岗位分类ID
						experience: this.form.experience,//经验
						salary:this.form.salary,//薪资
						education: this.form.education,//学历
						tag: this.tag_list,//职位关键字
						province: this.form.province,//省
						city:this.form.city,//市
						county:this.form.county,//县
						area:this.form.area,//区域
						address:this.form.address,//详细地址
						longitude:this.form.longitude,//经度
						latitude:this.form.latitude,//纬度
					}
				}).then(res=>{
					if(res.code == 1){
						uni.navigateTo({
							url:'/pages/recruit/index'
						})
					}
				})
			},
			
			// 编辑岗位
			get_recruit_editJob(){
				this.$http({
					url:this.api.recruit_editJob,
					method:'POST',
					data:{
						job_id:this.jsonItem.job_id,
						title:this.form.name,
						content:this.form.intro,
						category_id:this.jsonItem.category_id,
						experience:this.form.experience,
						salary:this.form.salary,
						education:this.form.education,
						tag:this.tag_list,
						province:this.form.province,//省
						city:this.form.city,//市
						county:this.form.county,//县
						area:this.form.area,//区域
						address:this.form.address,//详细地址
						longitude:this.form.longitude,//经度
						latitude:this.form.latitude,//纬度
					}
				}).then(res=>{
					if(res.code == 1){
						uni.navigateTo({
							url:'/pages/recruit/worker/zwgl'
						})
					}
				})
			},
			
			// 发布
			submit(){
				// 发布岗位
				this.get_recruit_addJob()
			},
			
			// 编辑完成
			completeSuccess(){
				// 编辑岗位
				this.get_recruit_editJob()
			},
			
			// 获取经纬度
			get_latAndLong(){
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.form.longitude = res.longitude;
						that.form.latitude = res.latitude
					},
					fail:function(err){
						console.log(err);
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 690rpx;
		height: 100rpx;
		background: #07C160;
		border-radius: 15rpx;
		font-size: 34rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/ .u-border-bottom:after {
		// border: 0;
	}

	/deep/ .u-form-item--left {
		margin-bottom: 0 !important;
	}

	/deep/ .u-input {
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		padding: 8rpx 30rpx !important;
		font-size: 28rpx;
		min-height:88rpx;
		
		u-tag{
			margin: 8rpx;
		}
	}
	/deep/ .u-input__input{
		min-height:88rpx !important;
	}
	/deep/ .u-mode-light-info{
		padding:12rpx 17rpx !important;
		border-radius:8rpx !important;
		border:0 !important;
		height: 66rpx !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center;
	}
	/deep/ .u-form-item{
		padding:10rpx 0 !important;
	}
	.textarea /deep/ .u-input{
		height: 180rpx;
		background: #F3F3F3;
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		padding:20rpx 30rpx !important;
	}
	.icon-plus-wrap{
		width: 100rpx;
		height: 66rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/deep/ .u-drawer-content {
		height: 50% !important;
	}
</style>
<style>
	page {
		padding: 30rpx;
		background: #fff;
	}
</style>